<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位管理 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/position.css}">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="position-container">
        <!-- 返回首页按钮 -->
        <div class="back-to-home">
            <a href="/home" class="btn btn-back">← 返回首页</a>
        </div>

        <!-- 页面标题和操作按钮 -->
        <div class="module-header">
            <h1 class="module-title">职位管理</h1>
            <div class="action-buttons" th:if="${roleIdValue < 4}">
                <a href="/position/add" class="btn btn-primary">新增职位</a>
                <button onclick="exportPositions()" class="btn btn-export">导出Excel</button>
                <script>
                    function exportPositions() {
                        window.open('/api/position/export', '_blank');
                    }
                </script>
            </div>
        </div>

        <!-- 搜索筛选区域 -->
        <div class="search-filter">
            <form th:action="@{/position}" method="get" class="search-form">
                <div class="filter-row">
                    <div class="form-group">
                        <select name="departmentId" class="form-control">
                            <option value="">全部部门</option>
                            <option
                                    th:each="dept : ${departments}"
                                    th:value="${dept.departmentID}"
                                    th:text="${dept.departmentName}"
                                    th:selected="${currentDepartmentId == dept.departmentID}">
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input
                                type="text"
                                name="positionName"
                                class="form-control"
                                placeholder="职位名称"
                                th:value="${currentPositionName}">
                    </div>
                    <div class="form-group">
                        <input
                                type="text"
                                name="positionCode"
                                class="form-control"
                                placeholder="职位编码"
                                th:value="${currentPositionCode}">
                    </div>
                </div>
                <div class="button-row">
                    <button type="submit" class="btn btn-search">搜索</button>
                    <button
                            type="reset"
                            class="btn btn-reset"
                            onclick="location.href='/position'">重置</button>
                </div>
            </form>
        </div>

        <div th:if="${successMessage}" class="alert alert-success" style="display: none;">
            <span th:text="${successMessage}"></span>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger" style="display: none;">
            <span th:text="${errorMessage}"></span>
        </div>

        <!-- 表格数据展示 -->
        <table class="data-table">
            <thead>
            <tr>
                <th width="100px">职位名称</th>
                <th width="120px">职位编码</th>
                <th width="150px">所属部门</th>
                <th width="100px">职级</th>
                <th width="80px">状态</th>
                <th width="200px">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="position : ${positions}">
                <td th:text="${position.positionName}"></td>
                <td th:text="${position.positionCode}"></td>
                <td th:text="${position.departmentID.departmentName}"></td>
                <td th:text="${position.positionRoleID.roleName}"></td>
                <td>
                    <span th:class="${position.status} ? 'status-active' : 'status-inactive'"
                          th:text="${position.status} ? '启用' : '禁用'"></span>
                </td>
                <td class="action-buttons">
                    <a th:href="@{/position/view/{id}(id=${position.positionId})}" class="btn-action view">查看</a>
                    <a th:href="@{/position/edit/{id}(id=${position.positionId})}"
                       class="btn-action edit"
                       th:if="${roleIdValue < 4 or (roleIdValue == 4 and position.departmentID.departmentID == currentUser.departmentID.departmentID)}">编辑</a>
                    <a th:href="@{/position/toggle-status/{id}(id=${position.positionId})}"
                       class="btn-action"
                       th:class="${position.status} ? 'btn-action disable' : 'btn-action enable'"
                       th:text="${position.status} ? '禁用' : '启用'"
                       data-method="post">
                    </a>
                    <a th:href="@{/position/delete/{id}(id=${position.positionId})}"
                       class="btn-action delete"
                       data-method="post">删除</a>
                </td>
            </tr>
            </tbody>
        </table>

        <!-- 分页组件 -->
        <nav class="pagination">
            <ul>
                <li th:if="${positions.hasPrevious()}">
                    <a th:href="@{'/position'(page=0,
                departmentId=${currentDepartmentId},
                positionName=${currentPositionName},
                positionCode=${currentPositionCode})}">&laquo;</a>
                </li>
                <li th:each="i : ${#numbers.sequence(0, positions.totalPages-1)}"
                    th:class="${i == positions.number} ? 'active'">
                    <a th:href="@{'/position'(page=${i},
                departmentId=${currentDepartmentId},
                positionName=${currentPositionName},
                positionCode=${currentPositionCode})}"
                       th:text="${i+1}"></a>
                </li>
                <li th:if="${positions.hasNext()}">
                    <a th:href="@{'/position'(page=${positions.totalPages-1},
                departmentId=${currentDepartmentId},
                positionName=${currentPositionName},
                positionCode=${currentPositionCode})}">&raquo;</a>
                </li>
            </ul>
        </nav>
    </main>
</div>
<script th:inline="javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const departmentSelect = document.querySelector('select[name="departmentId"]');

        // 部门选择变化时加载对应职位
        departmentSelect.addEventListener('change', function() {
            const form = this.closest('form');
            form.submit();
        });
    });
</script>
<script th:src="@{/js/position.js}"></script>
</body>
</html>